<template>
  <div class="container-randoms">
    <el-card>
      <!-- 头部 -->
      <el-row type="flex" justify="space-between">
        <el-col :span="24">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline demo-input-size"
          >
            <el-form-item label="关键字">
              <el-input v-model="formInline.user" size="small"> </el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <div style="float: right">
            <el-button size="small" @click="clearText">清除</el-button>
            <el-button size="small" type="primary" @click="getSearch"
              >搜索</el-button
            >
          </div>
        </el-col>
      </el-row>
      <template>
        <!-- 提示信息 -->
        <el-alert
          :title="`数据一共${page.total}条`"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 15px"
        />
      </template>
      <!-- 数据 -->

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="190"> </el-table-column>
        <el-table-column
          prop="questionType"
          :formatter="formatquestionType"
          label="题型"
          width="70"
        >
        </el-table-column>
        <el-table-column label="题目编号" width="190">
          <!-- prop="questionIDs.0.number" -->
          <template slot-scope="{ row }" >
            <div v-for="item in row.questionIDs" :key="item.index">
               <el-button type="text" @click="show(item)">{{item.number}}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" min-width="190">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="170">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" min-width="170">
        </el-table-column>
        <el-table-column prop="userName" label="录入人" min-width="170">
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="{ row }">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              circle
              size="small"
              @click="deleteData({id: row.id})"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <!-- 监听页面尺寸改变 size-change -->
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="page.total"
        :current-page="page.page"
        :current-pagesize="page.pagesize"
        @current-change="changePage"
         @size-change="changeSize"
      />
    </el-card>
      <!-- 弹出层 -->
      <questionsPreview
        ref="subject"
        :show-dialog.sync="showDialog"
      ></questionsPreview>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import questionsPreview from '../components/questions-preview.vue'
export default {
  data () {
    return {
      formInline: {
        user: ''
      },
      tableData: [],
      page: {
        page: 1, // 当前页码
        pagesize: 10,
        total: 0 // 总数
      },
      searches: [], // 搜索渲染的的数据
      questions: questionType,
      showDialog: false
    }
  },
  components: {
    questionsPreview
  },
  created () {
    // 获取组题列表
    this.getRandoms()
  },
  methods: {
    // 申请数据 渲染界面
    async getRandoms () {
      console.log(this.page)
      const { data } = await randoms(this.page)
      console.log(data)
      this.tableData = data.items
      this.page.total = data.counts // 总数赋值
    },
    // 格式化题型格式
    formatquestionType (row, column, cellValue, index) {
      // console.log(this.questions)
      const obj = this.questions.find((item) => item.value === +cellValue)

      return obj ? obj.label : '未知'
    },
    // 分页
    changePage (newPage) {
      this.page.page = newPage
      this.getRandoms()
    },
    // 尺码
    changeSize (newPage) {
      this.page.page = 1
      this.page.pagesize = newPage
      this.getRandoms()
    },
    // 清除
    clearText () {
      this.formInline.user = ''
      this.getRandoms()
    },
    // 搜索
    async getSearch () {
      const keyword = this.formInline.user
      const { data } = await randoms({ ...this.page, keyword })
      this.tableData = data.items
      // console.log(this.tableData)
      this.page.total = data.counts
    },
    // 删除
    async deleteData (data) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await removeRandoms(data)
        this.getRandoms()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 点击预览
    async show (data) {
      console.log(data)
      this.showDialog = true
      await this.$refs.subject.detail(data) // 父组件调用子组件方法
    }
  }
}
</script>

<style scoped lang='scss'>
.el-card {
  margin: 10px;
  .pager {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
  .demo-form-inline {
    margin-left: 28px;
  }
}
</style>
